<!DOCTYPE html>
<html>
  <head>
    <title>1024 Game</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .game-container {
        display: flex;
        flex-wrap: wrap;
        max-width: 400px;
        max-height: 400px;
        border: 1px solid black;
      }
      .game-tile {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 25%;
        height: 100px;
        max-width: 100px;
        max-height: 100px;
        border: 1px solid black;
        transition: all 0.5s;
        box-sizing: border-box;
      }
      .tile-2 {
        background-color: #eee4da;
      }

      .tile-4 {
        background-color: #ede0c8;
      }

      .tile-8 {
        background-color: #f2b179;
      }

      .tile-16 {
        background-color: #f59563;
      }

      .tile-32 {
        background-color: #f67c5f;
      }

      .tile-64 {
        background-color: #f65e3b;
      }

      .tile-128 {
        background-color: #edcf72;
      }

      .tile-256 {
        background-color: #edcc61;
      }

      .tile-512 {
        background-color: #edc850;
      }

      .tile-1024 {
        background-color: #edc53f;
      }

      #floatingBox {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        width: 300px;
        height: 300px;
        border: 2px solid #ccc;
        border-radius: 10px;
        padding: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background-color: #f5f5f5;

        position: absolute;
        bottom: 2vh;
        left: 2vw;
      }

      .arrow-button {
        display: block;
        width: 100px;
        height: 100px;
        border: none;
        border-radius: 10%;
        background-color: #4caf50; /* Green */
        color: white;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 20px;
        cursor: pointer;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.1s ease-in-out;

        position: absolute;
      }

      .arrow-button:hover {
        background-color: #45a049; /* Darker green */
        transform: scale(1.05);
      }

      #up {
        line-height: 50px;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
      }

      #left {
        line-height: 50px;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
      }

      #right {
        line-height: 50px;
        top: 50%;
        left: 100%;
        transform: translateY(-50%) translateX(-100%);
      }

      #down {
        line-height: 50px;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(-100%);
      }
    </style>
  </head>

  <body>
    <div class="game-container"></div>
    <div id="floatingBox" class="floating-box">
      <button id="up" class="arrow-button">上</button>
      <button id="down" class="arrow-button">下</button>
      <button id="left" class="arrow-button">左</button>
      <button id="right" class="arrow-button">右</button>
      <button id="restart" class="arrow-button" onclick="restartGame()">
        点击重开
      </button>
    </div>
    <script>
      // 创建游戏面板
      const gameContainer = document.querySelector(".game-container");
      const tiles = [];
      for (let i = 0; i < 16; i++) {
        const tile = document.createElement("div");
        tile.classList.add("game-tile");
        tiles.push(tile);
        gameContainer.appendChild(tile);
      }
      // 初始化游戏数据
      let board = Array(16).fill(0);
      function generateRandomTile() {
        const emptyTiles = board.reduce((acc, curr, index) => {
          if (curr === 0) {
            acc.push(index);
          }
          return acc;
        }, []);
        console.log({ emptyTiles });
        if (emptyTiles.length === 0) {
          return false;
        }
        const randomIndex =
          emptyTiles[Math.floor(Math.random() * emptyTiles.length)];

        // 随机生成2或4
        board[randomIndex] = Math.random() > 0.5 ? 2 : 4;
        return true; // 成功生成新方块
      }
      function updateBoard() {
        for (let i = 0; i < 16; i++) {
          tiles[i].innerText = board[i] === 0 ? "" : board[i];
          tiles[i].className = `game-tile tile-${board[i]}`;
        }
      }
      function moveLeft() {
        let hasChanged = false;
        for (let i = 0; i < 4; i++) {
          const row = board.slice(i * 4, (i + 1) * 4);

          // 合并相同的方块
          for (let j = row.length - 1; j > 0; j--) {
            if (row[j] === row[j - 1]) {
              row[j] *= 2;
              row[j - 1] = 0;
              hasChanged = true;
            }
          }
          // 移动方块
          for (let j = row.length - 1; j > 0; j--) {
            if (row[j - 1] === 0) {
              row[j - 1] = row[j];
              row[j] = 0;
              hasChanged = true;
            }
          }
          board.splice(i * 4, 4, ...row);
        }
        return hasChanged;
      }
      function moveRight() {
        let hasChanged = false;
        for (let i = 0; i < 4; i++) {
          const row = board.slice(i * 4, (i + 1) * 4);

          // 合并相同的方块
          for (let j = 0; j < row.length - 1; j++) {
            if (row[j] === row[j + 1]) {
              row[j] *= 2;
              row[j + 1] = 0;
              hasChanged = true;
            }
          }
          // 移动方块
          for (let j = 0; j < row.length - 1; j++) {
            if (row[j + 1] === 0) {
              row[j + 1] = row[j];
              row[j] = 0;
              hasChanged = true;
            }
          }
          board.splice(i * 4, 4, ...row);
        }
        return hasChanged;
      }
      function moveUp() {
        let hasChanged = false;
        for (let i = 0; i < 4; i++) {
          const column = [board[i], board[i + 4], board[i + 8], board[i + 12]];

          // 合并相同的方块
          for (let j = column.length - 1; j > 0; j--) {
            if (column[j] === column[j - 1]) {
              column[j] *= 2;
              column[j - 1] = 0;
              hasChanged = true;
            }
          }
          // 移动方块
          for (let j = column.length - 1; j > 0; j--) {
            if (column[j - 1] === 0) {
              column[j - 1] = column[j];
              column[j] = 0;
              hasChanged = true;
            }
          }
          board[i] = column[0];
          board[i + 4] = column[1];
          board[i + 8] = column[2];
          board[i + 12] = column[3];
        }
        return hasChanged;
      }
      function moveDown() {
        let hasChanged = false;
        for (let i = 0; i < 4; i++) {
          const column = [board[i], board[i + 4], board[i + 8], board[i + 12]];

          // 合并相同的方块
          for (let j = 0; j < column.length - 1; j++) {
            if (column[j] === column[j + 1]) {
              column[j] *= 2;
              column[j + 1] = 0;
              hasChanged = true;
            }
          }
          // 移动方块
          for (let j = 0; j < column.length - 1; j++) {
            if (column[j + 1] === 0) {
              column[j + 1] = column[j];
              column[j] = 0;
              hasChanged = true;
            }
          }
          board[i] = column[0];
          board[i + 4] = column[1];
          board[i + 8] = column[2];
          board[i + 12] = column[3];
        }
        return hasChanged;
      }
      function handleKeyDown(event) {
        let hasChanged = false;
        switch (event.key) {
          case "ArrowLeft":
            hasChanged = moveLeft();
            break;
          case "ArrowRight":
            hasChanged = moveRight();
            break;
          case "ArrowUp":
            hasChanged = moveUp();
            break;
          case "ArrowDown":
            hasChanged = moveDown();
            break;
        }
        if (hasChanged) {
          generateRandomTile();
          updateBoard();
          updateSumOnRestartBox();
        } else {
          alert("结束了,点击重开吧");
          restartGame();
        }
      }
      // 初始化游戏
      generateRandomTile();
      generateRandomTile();
      updateBoard();
      // 监听键盘事件
      document.addEventListener("keydown", handleKeyDown);
      document.addEventListener("DOMContentLoaded", function () {
        document.getElementById("up").addEventListener("click", function () {
          const mEvent = { key: "ArrowUp" };
          handleKeyDown(mEvent);
        });

        document.getElementById("down").addEventListener("click", function () {
          const mEvent = { key: "ArrowDown" };
          handleKeyDown(mEvent);
        });

        document.getElementById("left").addEventListener("click", function () {
          const mEvent = { key: "ArrowLeft" };
          handleKeyDown(mEvent);
        });

        document.getElementById("right").addEventListener("click", function () {
          const mEvent = { key: "ArrowRight" };
          handleKeyDown(mEvent);
        });
      });

      // 将board数组的总和映射到#restart的盒子上
      function updateSumOnRestartBox() {
        let sum = 0;
        for (let i = 0; i < board.length; i++) {
          sum += board[i];
        }
        document.getElementById("restart").innerText = "点击重开\n分数: " + sum;
      }

      function restartGame() {
        board = Array(16).fill(0);
        generateRandomTile();
        generateRandomTile();
        updateBoard();
        updateSumOnRestartBox();
      }
    </script>
  </body>
</html>
<!--加个重开按钮-->

